<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./go-debug.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 这个DIV必须指定宽高，否者不会被渲染出来
     我们通常为DIV设置一个背景颜色以便于我们更便捷的观察 -->
<div id="myDiagramDiv"
     style="width: 800px;height: 800px; background-color: #DAE4E4;"></div>

<script>
    var $ = go.GraphObject.make;
    var myDiagram =
        $(go.Diagram, "myDiagramDiv",
            {
                initialContentAlignment: go.Spot.Center, // 居中显示
                "undoManager.isEnabled": true // 支持 Ctrl-Z 和 Ctrl-Y 操作
            });

    // 定义个简单的 Node 模板
    myDiagram.nodeTemplate =
        $(go.Node, "Horizontal",
// 为整个Node背景设置为浅蓝色
            {background: "#44CCFF"},
            $(go.Picture,
// Pictures 应该指定宽高.
// 当没有图片时显示红色的背景
// 或者当图片为透明的时候也是.
                {margin: 10, width: 50, height: 50, background: "red"},
// Picture.source参数值与模型数据中的"source"字段绑定
                new go.Binding("source")),
            $(go.TextBlock,
                "Default Text",  // 初始化默认文本
// 文字周围的空隙, 大号字体, 白色笔画:
                {margin: 12, stroke: "white", font: "bold 16px sans-serif"},
// TextBlock.text参数值与模型数据中的"name"字段绑定
                new go.Binding("text", "name"))
        );

    var model = $(go.Model);
    model.nodeDataArray =
        [ // 注意每个节点数据对象内掌握着那些我们需要的参数;
// 这里我们添加了 "name" 和 "source" 参数
        {name: "Don Meow", source: "../image/example.png"},
        {name: "Copricat", source: "../image/example.png"},
        {name: "Demeter", source: "../image/example.png"},
        {/* 空节点数据 */}
    ];
    myDiagram.model = model;
</script>
</body>
</html>